<template>
     <div class="banner">
       <div class="ban">
         <img @click="handleDetailClick" src="//img1.qunarzz.com/sight/p0/1712/71/71ace1aa7d971212a3.water.jpg_600x330_5ff0b4e8.jpg" alt="">
         <div class="fhui" @click="returnCity"><span class="iconfont icon-fanhui"></span></div>
         <div class="icon"><span class="iconfont icon-tupian"></span><em>23</em></div>
         <div class="ban-name">渔阳滑雪场(AAAAA风景区)</div>
       </div>
       <detail-gallary v-show="showDetail" @change="getClose"></detail-gallary>
       
     </div>
</template>
<script>
  import DetailGallary from '@/pages/Common/Gallary/Gallary'
  export default {
    name: 'Banner',
    components : {
      DetailGallary
    },
    data () {
      return {
        showDetail : false
      }
    },
    methods :{
      handleDetailClick () {
        this.showDetail =true;
      },
      getClose(res){
        this.showDetail =res;
      },
       returnCity(){
         this.$router.push('/') // 编程式路由
       }
    }
  }
</script>

<style lang="stylus" scoped>
 .ban{
   position :relative;
   img{
     width:100%;
   }
   .fhui{
     position :absolute;
     left:.1rem;
     top:.1rem;
     width: .3 rem;
     height: .3rem;
     background-color :#000;
     border-radius:50%;
     text-align :center;
     line-height :.3rem;
     opacity :.6;
     .iconfont{
       color:white;
     }
   }
   .icon{
     width:.6rem;
     height:.2rem;
     background-color :#000;
     opacity:.6;
     border-radius:.2rem;
     text-align :center;
     line-height :.2rem;
     position :absolute;
     left:.1rem;
     bottom:.4rem;
     color:white;
     font-size:.12rem;
     span{
       margin-right:.05rem;
       font-size:.12rem;
     }
   }
   .ban-name{
     position:absolute;
     left:.1rem;
     bottom:.1rem;
     color:white;
     font-size:.18rem;
     text-shadow: 0 1px 2px rgba(0,0,0,0.70);
   }
 }
</style>
